<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    class Greeting extends React.Component {
        constructor(props){
            super(props);
            this.state = {
                color : this.props.color
            }
            this.handleClick = this.handleClick.bind(this);
            this.handleClear = this.handleClear.bind(this);

        }
        //Mounting
        componentWillMount()
        {
            console.log("componentWillMount");
        }
        componentDidMount(){
            console.log("componentDidMount");
        }
        //Updating
        componentWillReceiveProps(){
            console.log("componentWillReceiveProps");
        }

        shouldComponentUpdate(preProps, nextProps){
            console.log(arguments);
            console.log("shouldComponentUpdate");
            return true;
        }
        componentWillUpdate()
        {
            console.log("componentWillUpdate");
        }
        componentDidUpdate(){
            console.log("componentDidUpdate");
        }
        //Unmounting
        componentWillUnmount(){
            console.log("componentWillUnmount");
        }
        //Event Hander
        handleClick(e){
            this.setState(
                {
                    color : this.randonColor()
                }
            );
            // this method will skip shouldComponentUpdate
            // this.forceUpdate();

        }
        handleClear(e){
            ReactDOM.unmountComponentAtNode(document.getElementById("example"));
        }

        randonColor(){
            return  '#' +
                (function rdColor(color){
                    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])
                    && (color.length == 6) ?  color : rdColor(color);
                })('');
        }
        render() {
            return <div>
                <h1>Current Color : {this.state.color}</h1>
                <button style={{backgroundColor:this.state.color}} onClick={this.handleClick}>Update</button>
                <button  onClick={this.handleClear}>Clear</button>
            </div>;
        }
    }

    ReactDOM.render(
        <Greeting color="#32cdff"/>,
        document.getElementById("example")
    );
</script>
</body>
</html>

